﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EstatePicDetail.aspx.cs"
    Inherits="ZLDC.Estate.PM.EstatePicDetail" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>查看图片</title>
    <link href="../css/main.css" rel="stylesheet" type="text/css" />        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #photoView
        {
            padding: 1px;
            width: 550px;
            height: 400px;
            margin: 10px;
            padding: 0;
            list-style: none;
        }
        #photoView li
        {
            position: absolute;
            z-index: 1001;
            height: 400px;
        }
        #photoView #prev, #photoView #next
        {
            width: 300px;
            background: url(../images/inages/bg.png) repeat;
            filter: alpha(opacity=0);
            moz-opacity: 0.2;
            opacity: 0.2;
            cursor: url(../images/inages/prev.cur), auto;
            left: 10px;
            top: 10px;
            z-index: 1002;
        }
        #photoView #next
        {
            cursor: url(../images/inages/next.cur), auto;
            left: 280px;
            z-index: 1003;
        }
    </style>

    <script src="../js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="../js/LexunJS.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript" >
        var i = 0;
        var id = 0;
        var record = null;
        var recordLength = 0;
        $(document).ready(function() {
            var id = LexunJS.GetQueryString("id"); // 楼盘ID
            i = LexunJS.GetQueryString("num");

            showEstatePic();
        });


        // 1小区照片 2户型照片
        function showEstatePic() {
            var typeid = LexunJS.GetQueryString("typeid");
            var eid = LexunJS.GetQueryString("eid");
            if (eid <= 0) return;

            $("#content").html("<img src=\"../images/loading.gif\" />正在加载图片,请稍候...."); // 清空列表 
            $.ajax({
                type: 'POST',
                url: '../Handler/HandlerIndex.ashx',
                data: 'act=estatepic_list&eid=' + eid + '&type=' + typeid,
                timeout: '10000',
                error: function() {
                    alert("查询失败！");
                },
                success: function(json) {
                    showEstatePicCallBack(json);
                }
            });
        }

        function showEstatePicCallBack(response) {
            var json = eval("(" + response + ")");
            record = json.record;
            if (record == null || record.length == 0) {
                $("#content").html("还没有上传图片!");
                return;
            }
            recordLength = record.length;
            i = LexunJS.GetQueryString("num");

            showphoto();
        }

        function viewPhoto(type) {
            if (type == 'prev' && i == 0) {
                alert("这是第一张图片！");
                return;
            }
            if (type == 'prev' && i > 0) i--;
            if (type == 'next' && i < recordLength) i++;
            if (i == recordLength) {
                alert("这是最后一张图片！");
                i--;
                return;
            }

            showphoto();
        }

        function showphoto() {
            $("#content").html("");
            var arr = [];
            arr.push("<img id='img" + record[i].id + "' style='width:550px;' src='../" + record[i].picurl + "' />");
            arr.push("<br/>" + record[i].remark + "   <br/>上传人:" + record[i].user + "[" + record[i].dept + "]<br/>上传时间:" + record[i].createtime)

            $("#content").html(arr.join('')); // 显示列表
        }

    </script>

</head>
<body>
    <ul id="photoView">
        <li id="prev" title="查看上一张" onclick="viewPhoto('prev');"></li>
        <li id="next" title="查看下一张" onclick="viewPhoto('next');"></li>
        <li id="content" style="text-align: center">
            <img id="img" src="photo/pic1.jpg" width="400" height="300" /></li>
    </ul>
</body>
</html>
